﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - 数据库文档生成工具</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <!--vue-->
    <script src="~/lib/vue/vue.min.js"></script>
    <script src="~/lib/vue/axios.min.js"></script>
    <!--element-->
    <script src="~/lib/element/index.js"></script>
    <link href="~/lib/element/index.css" rel="stylesheet" />
    <!--echarts-->
    <script src="~/lib/chart/echarts.js"></script>
</head>
<body>
    <div id="app">
        <el-container>
            <el-header>

                <span style="font-weight: 900; " v-if="!isCollapse">
                    <span style="margin-left: 5px;font-weight:bolder">数据库文档生成工具</span>
                </span>
                <i class="el-icon-s-operation" :style="{ marginLeft: isCollapse ? '0px' : '30px' }" style="margin-top: 4px; cursor: pointer; font-size: 24px" v-on:click="toggleCollapse"></i>
            </el-header>
            <el-container>
                <el-aside :width="isCollapse ? '64px' : '200px'">
                    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" v-on:open="handleOpen" v-on:close="handleClose" :collapse="isCollapse">
                        <el-menu-item index="1" v-on:click="goPage({url:'/'})">
                            <i class="el-icon-s-home"></i>
                            <span slot="title">首页</span>
                        </el-menu-item>

                        <el-menu-item v-for="(item,index) in menuList" :index="item.id" v-on:click="goPage(item)">
                            <i :class="item.icon"></i>
                            <span slot="title">
                                {{item.name}}
                            </span>
                        </el-menu-item>

                    </el-menu>

                </el-aside>
                <el-main>
                    <div class="mainBody"> 
                        <iframe src="https://blog.csdn.net/wyljz/article/details/102520463"></iframe>
                    </div>
                </el-main>
            </el-container>
        </el-container>

    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                isCollapse: false,
                menuList: [],
            },
            methods: {
                handleOpen() {
                },
                handleClose() { },
                toggleCollapse() {
                    this.isCollapse = !this.isCollapse;
                },
                getMemu() {
                    let that = this;
                    axios.post('/Home/Menu', {
                        TypeName: '新房',
                    }).then(function (response) {
                        console.log(response);
                        let data = response.data.data;
                        that.menuList = data;

                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                goPage(item) {
                    if (item.url) {
                        window.location = item.url;
                    }
                }
            },
            created() {
                this.getMemu();
            },
            mounted() {
            }
        });
    </script>
    <style>
        html, body {
            margin: auto;
            height: 100%;
        }

        #_layout {
            height: 100%;
        }

        .el-container {
            height: 100%;
        }

        .el-header, .el-footer {
            background-color: #4e73df !important;
            color: #FFFFFF;
            text-align: left;
            line-height: 60px;
        }

        .el-aside {
            background-color: #FFFFFF;
            color: #333;
            text-align: center;
            line-height: 200px;
            border-right: 1px solid #CCC;
            max-width: 200px;
        }

        .el-main {
            background-color: #e6e6e6;
            color: #333;
            text-align: center;
            padding: 15px;
        }

        .mainBody {
            background-color: white;
            min-height: 100%;
            padding: 10px;
        }

        .el-menu {
            border-right: none
        }

        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 199px;
            min-height: 400px;
            text-align: left;
        }
    </style>
</body>
</html>
